<section id="setuser">
    <section class="userTop">
        <header>
            <div nz-row>
                <div nz-col [nzSpan]="7">
                    <label>
                    <span>车牌号码</span>
                </label>
                    <nz-input [(ngModel)]="parts.carNo" [nzPlaceHolder]="'车牌号码'" [nzSize]="'large'"></nz-input>
                </div>
                <div nz-col [nzSpan]="7">
                    <label>
                    <span>录入日期</span>
                </label>
                    <nz-datepicker [nzSize]="'large'" [(ngModel)]="createTime" [nzPlaceHolder]="'录入日期'" [nzFormat]="'YYYY-MM-DD'"></nz-datepicker>
                </div>
                <div nz-col [nzSpan]="7">
                    <label>
                    <span>油卡有效期</span>
                </label>
                    <nz-datepicker [nzSize]="'large'" [(ngModel)]="deadLine" [nzPlaceHolder]="'油卡有效期'" [nzFormat]="'YYYY-MM-DD'"></nz-datepicker>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="7" class="twoline">
                    <label>
                    <p>司机</p>
                </label>
                    <nz-input [(ngModel)]="parts.driverName" [nzPlaceHolder]="'司机'" [nzSize]="'large'"></nz-input>
                </div>
                <div nz-col [nzSpan]="7" class="twoline">
                    <label>
                    <p>状态</p>
                </label>
                    <nz-select [(ngModel)]="parts.oilCardStatus" [nzPlaceHolder]="'状态'" [nzSize]="'large'" nzAllowClear>
                        <nz-option *ngFor="let option of optionOilCardStatus" [nzLabel]="option.label" [nzValue]="option.value" [nzDisabled]="option.disabled">
                        </nz-option>
                    </nz-select>
                </div>
            </div>
        </header>
        <main class="clearfix">
            <button class="fr" nz-button [nzType]="'primary'" (click)="loadAll()">
              <i class="anticon anticon-search"></i><span>检索</span>
            </button>
        </main>
        <footer>
            <button nz-button [nzType]="'default'" [routerLink]="['../oil-new', 0 ,'add']">
              <span>添加</span>
            </button>
        </footer>
    </section>
    <section>
        <main>
            <nz-table #nzTable [nzAjaxData]="data" [nzTotal]="_total" [nzPageSize]="10" [nzPageIndex]="pageIndex" (nzPageIndexChange)="resetIndex($event)">
                <thead nz-thead>
                    <tr>
                        <th nz-th><span>序号</span></th>
                        <th nz-th><span>油卡号码</span></th>
                        <th nz-th><span>录入日期</span></th>
                        <th nz-th><span>油卡有效期</span></th>
                        <th nz-th><span>车牌号码</span></th>
                        <th nz-th><span>司机</span></th>
                        <th nz-th><span>状态</span></th>
                        <th nz-th><span>操作</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of nzTable.data;let i = index;">
                        <td nz-td>{{i+1}}</td>
                        <td nz-td>
                            <a>{{data.oilCardNo}}</a>
                        </td>
                        <td nz-td>{{data.createTime}}</td>
                        <td nz-td>{{data.deadLine}}</td>
                        <td nz-td>{{data.carNo}}</td>
                        <td nz-td>{{data.driverName}}</td>
                        <td nz-td>{{data.oilCardStatus}}</td>
                        <td nz-td>
                            <button nz-button [nzType]="'default'" [routerLink]="['../oil-new',data.oilCardId,'view']">
                              <span>查看</span>
                            </button>
                            <button nz-button [nzType]="'default'" [routerLink]="['../oil-new',data.oilCardId,'modify']">
                              <span>修改</span>
                            </button>
                            <button nz-button [nzType]="'default'" [routerLink]="['../oilinfo',data.oilCardId]">
                              <span>充值</span>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </main>
    </section>
</section>